/**
 * @description 把表单数据，转为样式文件
 */

// 对象格式的 样式style标签集合
let objectData = {
  login: null,
  register: null,
  header: null,
}

// css字符串格式的 样式style标签集合
let cssData = {
  login: null,
  register: null,
  header: null,
}

/**
 * @description 初始化。新建两个<style></style>标签，并添加样式
 * @param {*} actKey 
 * @param {*} formData 
 */
export function initStyle(actKey, formData) {
  // [1] 对象属性格式
  // 创建一个 <style> 标签
  let objectStyle = objectData[actKey]
  if (!objectStyle) {

    objectStyle = document.createElement('style')

    objectData[actKey] = objectStyle
  }


  // 添加 CSS 样式
  // 拼接样式字符串
  let textContent = ''

  // 第一层
  for (const key in formData) {

    let data = formData[key]

    textContent += addStyle(key, data)

    // 第二层
    if (typeof data === 'object') {

      for (const key2 in data) {
        textContent += addStyle(key2, data[key2])
      }
    }

  }

  // 添加到style元素的textContent属性
  objectStyle.textContent = textContent

  // 将 <style> 标签添加到 <head> 中
  document.head.appendChild(objectStyle);



  // [2] css字符串格式
  let cssStyle = cssData[actKey]
  if (!cssStyle) {
    cssStyle = document.createElement('style')

    cssData[actKey] = cssStyle
  }

  cssStyle.textContent = formData.css || ''
  document.head.appendChild(cssStyle);
}


/**
 * @description 添加一个类的样式
 * @param { object } styleData  
 * @param { string } key  唯一标志
 * @param { string } styleData.classname  类名
 * @param { object } styleData.default  类的样式
 * @param { object } styleData.hover  类的hover样式
 * @param { object } styleData.focus  类的focus样式
 * @returns 
 */
export function addStyle(key, styleData) {

  let { classname } = styleData
  let str = ''

  if (!classname) {
    return str
  }


  // 加个标志符号，方便replaceStyle更新替换
  str += `/*${key}start*/`

  // 样式
  str += creatStyleStr(classname, styleData)

  str += `/*${key}end*/`

  return str
}

// 创建类样式字符串
function creatStyleStr(classname, styleData) {
  let str = ''

  // 1.普通样式
  str += `${classname} {`
  for (const key in styleData.default) {

    const value = styleData.default[key]
    if (value === undefined) continue

    // 小驼峰转为   minHeight -> min-height
    let cssKey = key.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase())
    str += `${cssKey}: ${value};`
  }
  str += '}'

  // 2.hover样式
  if (styleData.hover) {
    // 可能有多个类： .item,.item-1,item-2 --> .item:hover,.item-1:hover,item-2:hover{}
    let newstr = classname.replaceAll(',', ':hover,') + ':hover{'
    str += newstr
    for (const key in styleData.hover) {

      const value = styleData.hover[key]
      if (value === undefined) continue

      let cssKey = key.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase())
      str += `${cssKey}: ${value};`
    }
    str += '}'
  }


  // 3.focus样式 (focus 与 focus-within)
  if (styleData.focus) {
    let newstr = classname.replaceAll(',', ':focus-within,') + ':focus-within{'
    str += newstr
    for (const key in styleData.focus) {

      const value = styleData.focus[key]
      if (value === undefined) continue

      let cssKey = key.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase())
      str += `${cssKey}: ${value};`
    }
    str += '}'
  }

  return str
}

/**
 * @description 修改一个类的ObjectStyle样式
 * @param { string } actKey 模块名
 * @param { string } key 对象key
 * @param { object } styleData  
 * @param { string } styleData.classname  类名
 * @param { object } styleData.default  类的样式
 * @param { object } styleData.hover  类的hover样式
 * @param { object } styleData.focus  类的focus样式
 * @returns 
 */
export function replaceObjectStyle(actKey, key, styleData) {
  let objectStyle = objectData[actKey]
  if (!objectStyle) {
    console.error('登录页面的style元素不存在')
    return
  }

  // 新的样式
  let newStyleStr = addStyle(key, styleData)


  // 替换旧的某个类的样式

  // 匹配规则
  let reg = new RegExp(`\\/\\*${key}start\\*\\/.*?\\/\\*${key}end\\*\\/`)


  // 更新style元素的 --> 更新样式
  objectStyle.textContent = objectStyle.textContent.replace(reg, newStyleStr)

}

/**
 * @description 修改cssStyle文件
 * @param { string } actKey 模块名 
 * @param { string } value 新值
 * @returns 
 */
export function replaceCssStyle(actKey, value) {
  let cssStyle = cssData[actKey]
  if (!cssStyle) {
    console.error('登录页面的css元素不存在')
    return
  }

  // 更新style元素的 --> 更新样式
  cssStyle.textContent = value
}

/**
 * @description 整体修改ObjectStyle和cssStyle，来自复制黏贴的操作
 */
export function replaceAllStyle(actKey, formData) {

  // [1] 修改 对象属性格式ObjectStyle
  let objectStyle = objectData[actKey]
  let textContent = ''


  for (const key in formData) {

    let data = formData[key]

    textContent += addStyle(key, data)

    // 第二层
    if (typeof data === 'object') {

      for (const key2 in data) {
        textContent += addStyle(key2, data[key2])
      }
    }
  }


  // 添加到style元素的textContent属性
  objectStyle.textContent = textContent

  // [2] 修改cssStyle
  replaceCssStyle(actKey, formData.css)
}